<template>
  <div class="fangyin-container">
    <div class="group h-8 cursor-pointer w-full absolute top-0 left-0 bg-transparent z-10">
      <div class="group-hover:translate-y-0 absolute -translate-y-8 w-full h-full transition-all">
        <StatusBar
          :loading="loading"
          :commType="commType"
          :username="username"
          :viewUserNames="viewUserNames"
          :clientId="clientId"
        >
          <div class="flex text-sm select-none">
            <div @click="toggle">{{ isFullscreen ? "退出全屏" : "全屏" }}</div>
          </div>
        </StatusBar>
      </div>
    </div>
    <Slider
      :modelValue="viewConfig"
      v-if="messageType.ZM === viewConfig.messageType || messageType.JW === viewConfig.messageType"
    />
    <GePuSlider :modelValue="viewConfig" v-if="messageType.GP === viewConfig.messageType" />
  </div>
</template>
<script setup>
import useClient from "./new/hooks/useClient";
import StatusBar from "./new/components/StatusBar.vue";
import Slider from "./new/components/FanyYing/Slider.vue";
import GePuSlider from "./new/components/FanyYing/JcGePuFangYing.vue";
import { messageType } from "./config.js";
import { toRefs } from "vue";
import { useFullscreen } from "@vueuse/core";

const { isFullscreen, enter, exit, toggle } = useFullscreen();
const { commType, viewConfig, username, loading, viewUserNames, screenSrc, screenInfo, clientId } = useClient(false);
const { bgColor } = toRefs(viewConfig);
</script>
<style scoped>
.fangyin-container {
  overflow: hidden;
  box-sizing: border-box;
  background-color: v-bind(bgColor);
  transition: background-color 0.5s linear;
  -ms-overflow-style: none; /* IE and Edge */
  width: 100vw;
  height: 100vh;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
  --webkit-scrollbar: none;
  --webkit-scrollbar-track: none;
  --webkit-scrollbar-thumb: none;
}

.fangyin-container::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
